<template>
	<div>
		<!-- 标题 -->
		<my-title></my-title>
		<div class="content">
			<!-- 内容描述 -->
			<div class="describe">
				<div class="first">
					<span>内容描述：</span>
					<div>
						<span>语音输入</span>
					</div>
				</div>
				<div class="second">
					<textarea v-model="description" placeholder="内容描述（可以文字和语音录入，语音请讲普通话）"></textarea>
				</div>
				<div class="third">
					<van-tag
						v-for="(item,index) in hotTag"
						:key="item.id"
						:class="item.active ? 'selectColor tag' : 'bgColor tag'"
						@click="tagSelected(index)"
					>{{item.tag}}</van-tag>
				</div>
			</div>
			<div class="line"></div>
			<div class="pic">
				<p>上传信息照片</p>
				<p>有照片更真实，信息传播更快哦。</p>
				<div class="rowPic">
					<div class="upPic">
						<img src="../assets/images/add_pic.png" alt />
						<span>上传照片</span>
					</div>
				</div>
			</div>
			<div class="line"></div>
			<div class="contact">
				<p>联系人：木子</p>
				<div style="height:1px; width:100%; background-color:#f1f1f1"></div>
				<p>电话号码：15830698113</p>
			</div>
			<div class="line"></div>
			<div class="condition" @click="showPopup">
				<span>{{timeText}}</span>
				<span class="choose time">选择时长</span>
			</div>
			<div class="line"></div>
			<div class="condition" @click="showTopPopup">
				<span>{{topText}}</span>
				<span class="choose top">点击置顶</span>
			</div>
			<div class="line"></div>
		</div>
		<!-- 确认发布 -->
		<div
			class="submit"
			@click="createInfo"
		>确认发布{{allMoney == 0? "": ("（共支付"+allMoney+"元）")}}</div>

		<van-popup v-model="show" position="bottom" :style="{ height: 'auto' }">
			<div>
				<p class="title">请选择信息要显示的时长</p>
				<div
					v-for="(item,index) in showTimeList"
					:key="item.id"
					@click="selectTime(index)"
				>
					<div class="option">
						<span>{{item.time}}</span>
						<span>{{item.money}}</span>
					</div>
					<p class="pop-line"></p>
				</div>
			</div>
		</van-popup>

		<van-popup v-model="showTop" position="bottom" :style="{ height: 'auto' }">
			<div>
				<p class="title">选择置顶让更多的人看到</p>
				<div
					v-for="(item,index) in showTopList"
					:key="item.id"
					@click="selectTop(index)"
				>
					<div class="option">
						<span>{{item.topTime}}</span>
						<span>{{item.money}}</span>
					</div>
					<p class="pop-line"></p>
				</div>
				<div class="line"></div>
				<div class="cancleTop" @click="cancleTopPopup">取消置顶</div>
			</div>
		</van-popup>
	</div>
</template>
<script>
import MyTitle from "../components/MyTitle.vue"
import api from "../api/index";
import {
  Toast,
} from "vant";
export default {
	components: {
		MyTitle
	},
	data () {
		return {
			show: false,
			showTop: false,
			timeText: "请选择您信息显示的时长",
			topText: "置顶可以让更多的人看到",
			allMoney: 0,
			showMoney: 0,
			topMoney: 0,
			hotTag: [
				{
					id: 1,
					tag: '五险一金',
					active: true
				},
				{
					id: 2,
					tag: '包吃包住',
					active: false
				},
				{
					id: 3,
					tag: '双休',
					active: false
				},
				{
					id: 4,
					tag: '年底双薪',
					active: false
				},
				{
					id: 5,
					tag: '住房补助',
					active: false
				},
				{
					id: 6,
					tag: '话费补助',
					active: false
				},
				{
					id: 7,
					tag: '交通补助',
					active: false
				},
				{
					id: 8,
					tag: '餐费补助',
					active: false
				},
				{
					id: 9,
					tag: '加班补助',
					active: false
				},
			],
			showTimeList: [
				{
					id: 1,
					time: "发布显示1天",
          day:1,
					money: "(免费)",
					cash: 0,
				},
				{
					id: 2,
					time: "显示6天",
          day:6,
					money: "(收费10元)",
					cash: 10,
				},
				{
					id: 3,
					time: "显示10天",
          day:10,
					money: "(收费18元)",
					cash: 18,
				},
				{
					id: 4,
					time: "显示15天",
          day:15,
					money: "(收费28元)",
					cash: 28,
				},
				{
					id: 5,
					time: "显示30天",
          day:30,
					money: "(收费48元)",
					cash: 48,
				},
				{
					id: 6,
					time: "显示60天",
          day:60,
					money: "(收费88元)",
					cash: 88,
				},
			],
			showTopList: [
				{
					id: 1,
					topTime: "置顶6天",
          day:6,
					money: "(收费120元)",
					cash: 120,
				},
				{
					id: 2,
					topTime: "置顶10天",
          day:10,
					money: "(收费180元)",
					cash: 180
				},
				{
					id: 3,
					topTime: "置顶15天",
          day:15,
					money: "(收费240元)",
					cash: 240,
				},
				{
					id: 4,
					topTime: "置顶30天",
          day:30,
					money: "(收费390元)",
					cash: 390,
				},
				{
					id: 5,
					topTime: "置顶6天+客服推广",
          day:6,
					money: "(收费200元)",
					cash: 200,
				},
				{
					id: 6,
					topTime: "置顶10天+客服推广",
          day:10,
					money: "(收费280元)",
					cash: 280,
				},
				{
					id: 7,
					topTime: "置顶15天+客服推广",
          dday:15,
					money: "(收费350元)",
					cash: 350,
				},
				{
					id: 8,
					topTime: "置顶30天+客服推广",
          day:30,
					money: "(收费500元)",
					cash: 500,
				},
			],
			description: "",
			label: "",
			contacts: "",
			duration: "",
			setTop: "",
			setTopDuration: ""
		}
	},
	methods: {
		// 发布信息
		createInfo: async function () {
			// var listLabel = this.hotTag.filter(function (item) {
			// 	if (item.active) {
			// 		return item;
			// 	}
			// });
      if(!this.description){
         Toast({
            message: "请输入内容",
          });
        return;
      }
			var ids = []
			this.hotTag.map(item => {
				if (item.active) {
					ids.push(item.id)
				}
			});
			this.label = ids.join()
			const params = {
				userId: 2,
				description: this.description,
				label: this.label,
				contacts: "木子",
				telephone: "15830698113",
				duration: this.duration,
				setTop: 0,
				setTopDuration: this.setTopDuration
			};
      	console.log("发布信息", params)
			const res = await api.createInfo(params);
			console.log(res);
		},

		tagSelected: function (index) {
			let newList = this.hotTag.concat();
			let item = newList[index];
			item.active = !item.active;
			this.hotTag = newList;
		},
		showPopup () {
			this.show = true;
		},
		selectTime: function (index) {
			this.timeText = this.showTimeList[index].time + "  " + this.showTimeList[index].money;
      this.duration = this.showTimeList[index].day;
			this.show = false;
			this.showMoney = this.showTimeList[index].cash
			this.allMoney = this.topMoney + this.showMoney
		},
		showTopPopup: function () {
			this.showTop = true
		},
		cancleTopPopup: function () {
			this.showTop = false
		},
		selectTop: function (index) {
			this.topText = this.showTopList[index].topTime + "  " + this.showTopList[index].money;
      this.setTopDuration =  this.showTopList[index].day;
			this.showTop = false;
			this.topMoney = this.showTopList[index].cash
			this.allMoney = this.topMoney + this.showMoney
		},



	}
}
</script>
<style scoped>
textarea {
	border: none;
}
.content {
	font-size: 15px;
	color: #666;
}
.describe .first {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 20px;
}

.second > textarea {
	width: calc(100% - 40px);
	margin: 0 20px;
	height: 100px;
}
.third {
	width: calc(100% - 10px);
	height: auto;
	margin-left: 10px;
	margin-bottom: 10px;
}
.third .tag {
	border: 1px solid #ddd;
	border-radius: 2px;
	padding: 10px;
	margin: 10px 10px 0 0;
	font-size: 14px;
}
.third .selectColor {
	color: #fff;
	background: #ed414a;
}
.third .bgColor {
	color: #666;
	background: #fff;
}
.line {
	width: 100%;
	height: 10px;
	background-color: #f1f1f1;
}
.pic {
	padding: 10px;
}
.pic > :nth-child(1) {
	color: #333;
	font-size: 16px;
	font-weight: 700;
}
.pic > :nth-child(2) {
	font-size: 12px;
	margin-top: 5px;
	color: #999;
}
.pic .rowPic {
	margin-top: 30px;
}
.pic .upPic {
	background-color: #f1f1f1;
	width: 80px;
	height: 80px;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.upPic > :nth-child(1) {
	width: 32px;
	height: 32px;
}
.upPic > :nth-child(2) {
	color: #999;
	font-size: 12px;
	margin-top: 3px;
}
.contact {
	margin: 10px;
}
.contact > :nth-child(1) {
	padding-bottom: 10px;
}
.contact > :nth-child(3) {
	padding-top: 10px;
}
.condition {
	color: #ed414a;
	padding: 10px 30px 10px 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.choose {
	color: #fff;
	background-color: #ed414a;
	width: 80px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-radius: 20px;
	font-size: 14px;
}
.submit {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 44px;
	background-color: #ed414a;
	color: #fff;
	text-align: center;
	height: 40px;
	line-height: 40px;
	border-radius: 4px;
}
.title {
	color: #fff;
	background: #ed414a;
	height: 44px;
	line-height: 44px;
	text-align: center;
}
.pop-line {
	height: 1px;
	width: 100%;
	background-color: #f1f1f1;
}
.option {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 10px 30px 10px 10px;
	font-size: 16px;
	color: #666;
}
.cancleTop {
	font-size: 15px;
	width: 100%;
	height: 44px;
	color: #666;
	line-height: 44px;
	text-align: center;
}
</style>
